<template>
  <div class="home_left" style="width: 100%">
    <div class="is_img1">
      <img :src="require('@/assets/images/right_top.png')" alt="" />
    </div>
    <div class="is_info">
      <div class="is_info_item">
        <div class="is_title">省份</div>
        <div class="is_info_province">
          <span> {{ userInfo.areaDict || "-" }}</span
          ><span class="el-icon-arrow-down"></span>
        </div>
      </div>
      <div class="is_info_item" style="margin-top: 10px">
        <div class="is_title">科目</div>
        <div class="is_subject">
          <div>
            <div class="is_subject_title">高考科目</div>
            <div class="is_subject_info_box">
              {{ userInfo.majorDict }}
            </div>
          </div>
        </div>
      </div>
      <div class="is_info_item" style="margin-top: 10px">
        <div class="is_all_rs">
          <div>{{ userInfo.gk_score || "-" }}<span>分</span></div>
          <div>{{ userInfo.ranking || "-" }}<span>位</span></div>
        </div>
      </div>
      <div class="is_info_item" style="margin-top: 10px" @click="addScore">
        <div class="info_btn">志愿修改</div>
      </div>
    </div>
    <div class="is_badge_box">
      <div class="is_title_badge">
        <img :src="require('@/assets/images/temp.png')" alt="" /><span
          >推荐院校</span
        >
      </div>
      <div class="is_badge_info">
        <div
          class="badge_item"
          v-for="(item, i) in recommendSchoolList"
          :key="i"
          @click="handleSchool(item)"
        >
          <div
            class="badge_item_num"
            :class="
              i == 0
                ? 'one_class'
                : i == 1
                ? 'two_class'
                : i == 2
                ? 'three_class'
                : ''
            "
          >
            {{ i + 1 }}
          </div>
          <!---->
          <div class="badge_item_name">{{ item.name }}</div>
        </div>
      </div>
    </div>
    <addScore
      ref="addScoreRef"
      @getUserInfoUpdate="getUserInfoUpdate"
    ></addScore>
  </div>
</template>

<script>
import { mapState } from "vuex";
import addScore from "@/layout/components/addScore.vue";
import { schoolList } from "@/api/index";
import { EventBus } from "@/utils/eventBus";
export default {
  name: "",
  components: { addScore },
  computed: {
    ...mapState({
      device: (state) => state.app.device,
    }),
  },
  data() {
    return {
      userInfo: {},
      version: "3.8.9",
      recommendSchoolList: [],
      handleProvinceList: [],
      majorList: [
        { label: "1", name: "理科" },
        { label: "2", name: "文科" },
        { label: "3", name: "物理" },
        { label: "4", name: "化学" },
        { label: "5", name: "生物" },
        { label: "6", name: "政治" },
        { label: "7", name: "历史" },
        { label: "8", name: "地理" },
        { label: "9", name: "技术" },
      ],
    };
  },
  created() {
    EventBus.$on("getUserInfo", () => {
      this.getUserInfoUpdate();
    });
  },
  watch: {
    $route(to, from) {
      this.getUserInfoUpdate();
    },
  },
  mounted() {
    this.getSchoolList();
    setTimeout(() => {
      this.userInfo = JSON.parse(localStorage.getItem("userScoreInfo"));
    }, 500);
  },
  methods: {
    /*
     * author：Gengbaodada
     * create by date：2025/05/12
     * content：重构学科数据
     */
    resultMojarList() {
      if (
        this.userInfo.province_name == "西藏" ||
        this.userInfo.province_name == "新疆"
      ) {
        this.handleProvinceList = [this.majorList[0], this.majorList[1]];
      } else if (
        this.userInfo.province_name == "北京" ||
        this.userInfo.province_name == "天津" ||
        this.userInfo.province_name == "上海" ||
        this.userInfo.province_name == "山东" ||
        this.userInfo.province_name == "海南"
      ) {
        this.handleProvinceList = [
          this.majorList[2],
          this.majorList[3],
          this.majorList[4],
          this.majorList[5],
          this.majorList[6],
          this.majorList[7],
        ];
      } else if (this.userInfo.province_name == "浙江") {
        this.handleProvinceList = [
          this.majorList[2],
          this.majorList[3],
          this.majorList[4],
          this.majorList[5],
          this.majorList[6],
          this.majorList[7],
          this.majorList[8],
        ];
      } else {
        this.handleProvinceList = [
          this.majorList[3],
          this.majorList[4],
          this.majorList[5],
          this.majorList[7],
        ];
      }
    },
    /*
     * author：Gengbaodada
     * create by date：2025/05/07
     * content：
     */
    handleSchool(item) {
      this.$router.push({
        path: "/collegeDetail",
        query: { id: item.school_id },
      });
      EventBus.$emit("schoolDetails", item.school_id);
    },
    /*
     * author：Gengbaodada
     * create by date：2025/05/07
     * content：获取推荐大学
     */
    getSchoolList() {
      schoolList({
        is_recommend: 1,
        qj: "",
        double_high: "",
        central: "",
        department: "",
        dual_class: "",
        f211: "",
        f985: "",
        year: "",
        max_score: "",
        min_score: "",
        school_nature: "",
        school_type: "",
        school_name: "",
        page: 1,
        pageSize: 20,
        province: "",
      }).then((res) => {
        console.log("res", res);
        this.recommendSchoolList = res.data.data;
      });
    },
    getUserInfoUpdate() {
      this.userInfo = JSON.parse(localStorage.getItem("userScoreInfo"));
    },
    //填报分数
    addScore() {
      this.$refs.addScoreRef.handleOpen();
    },
  },
};
</script>

<style scoped lang="scss">
.home_left .is_img {
  width: 160px;
  margin-top: 16px;
}

.home_left .is_img img {
  width: 100%;
}

.home_left .is_img1 {
  width: 100%;
  height: 180px;
}

.home_left .is_img1 img {
  width: 100%;
  height: 100%;
}

.home_left .is_badge_box {
  width: 100%;
  margin-top: 20px;
}

.home_left .is_badge_box .is_title_badge {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.home_left .is_badge_box .is_title_badge span {
  color: #222224;
  font-family: Microsoft YaHei UI;
  font-size: 14px;
  font-weight: 700;
}

.home_left .is_badge_box .is_title_badge img {
  width: 20px;
  height: 20px;
  margin-right: 10px;
}

.home_left .is_badge_box .is_badge_info {
  width: 100%;
  padding: 20px;
  border-radius: 8px;
  background-color: #fff;
  margin-top: 20px;
}

.home_left .is_badge_box .is_badge_info .badge_item {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin: 0 0 20px;
  cursor: pointer;
}

.home_left .is_badge_box .is_badge_info .badge_item .badge_item_num {
  width: 20px;
  height: 20px;
  margin-right: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: 600;
  background-color: #9ca1a6;
  color: #fff;
  border-radius: 4px;
  font-size: 12px;
}

.home_left .is_badge_box .is_badge_info .badge_item .one_class {
  background-color: #f84056;
}

.home_left .is_badge_box .is_badge_info .badge_item .two_class {
  background-color: #ff623a;
}

.home_left .is_badge_box .is_badge_info .badge_item .three_class {
  background-color: #ffb03a;
}

.home_left .is_badge_box .is_badge_info .badge_item .badge_item_avatar {
  width: 24px;
  height: 24px;
  margin-right: 10px;
  border-radius: 50%;
}

.home_left .is_badge_box .is_badge_info .badge_item .badge_item_name {
  flex: 1;
  color: #222224;
  font-weight: 600;
}

.home_left .is_badge_box .is_badge_info .badge_item:hover .badge_item_name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 24px;
}

.home_left .is_badge_box .is_badge_info .badge_item:hover .badge_item_avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
}

.home_left .is_badge_box .is_badge_info .badge_item:hover .badge_item_num {
  width: 40px;
  height: 40px;
  margin-right: 10px;
  font-size: 24px;
}

.home_left .is_info {
  width: 100%;
  margin-top: 20px;
  border-radius: 8px;
  padding: 20px;
  box-sizing: border-box;
  background: url("~@/assets/images/right_back.png") no-repeat;
  background-size: 100% 100%;
}

.home_left .is_info .is_info_item {
  display: flex;
  justify-content: flex-start;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  color: #606166;
}

.home_left .is_info .is_info_item .info_btn {
  width: 210px;
  height: 32px;
  border-radius: 4px;
  background: #0478f1;
  color: #fff;
  font-family: Microsoft YaHei UI;
  font-size: 14px;
  letter-spacing: 0.56px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
}

.home_left .is_info .is_info_item .is_all_rs {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #9ca1a6;
}

.home_left .is_info .is_info_item .is_all_rs div {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 5px;
  width: 96px;
  height: 30px;
  margin-right: 20px;
  border-radius: 4px;
  border: 1px solid rgba(0, 0, 0, 0.078);
  background: #fff;
}

.home_left .is_info .is_info_item .is_subject {
  flex: 1;
}

.home_left .is_info .is_info_item .is_subject .is_subject_title {
  font-size: 12px;
  color: #ccc;
  width: 50px;
}

.home_left .is_info .is_info_item .is_subject .is_subject_info_box {
  margin-top: 5px;
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
}

.home_left
  .is_info
  .is_info_item
  .is_subject
  .is_subject_info_box
  .is_subject_info {
  margin-right: 12px;
  margin-bottom: 12px;
}

.home_left .is_info .is_info_item .is_title {
  width: 30px;
  color: #222224;
  font-family: Microsoft YaHei UI;
  font-size: 14px;
  letter-spacing: 0.56px;
  margin-right: 10px;
  line-height: 28px;
  font-weight: 600;
}

.home_left .is_info .is_info_item .is_info_province {
  width: 100px;
  height: 28px;
  border-radius: 4px;
  border: 1px solid rgba(0, 0, 0, 0.078);
  background: #fff;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.home_right {
  flex: 1;
  margin-left: 20px;
}

.triangle {
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 6px solid #000;
}
</style>
